<template>
  <view class="search-box">
    <my-search @click="goSearch"></my-search>
  </view>
  <!-- 轮播图 -->
  <view>
    <swiper :indicator-dots="true" :autoplay="true" :circular="true" :interval="3000" :duration="1000">
      <swiper-item v-for="item in swiperList" :key="item.goods_id">
        <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
          <image :src="item.image_src"></image>
        </navigator>
      </swiper-item>
    </swiper>
  </view>
  <!-- 首页分类图 -->
  <view class="nav-list">
    <view class="nav-img" @click="navToCate(item)" v-for="(item, index) in navCateList" :key="index">
      <image :src="item.image_src"></image>
    </view>
  </view>
  <!-- 楼层区域 -->
  <view class="floor-list">
    <!-- 楼层项 -->
    <view class="floor-item" v-for="(item, index) in floorList" :key="index">
      <!-- 楼层标题 -->
      <image v-if="item.floor_title && item.floor_title.image_src" :src="item.floor_title.image_src"
        class="floor-title"></image>
      <view v-else>无图片</view> <!-- 如果没有图片，可以显示一个占位符 -->
      <!-- 楼层图片 -->
      <view class="floorImgBox">
        <!-- 楼层左侧图片 -->
        <navigator class="leftImg" v-if="item.product_list && item.product_list.length > 0" :url="item.product_list[0].url">
          <image :src="item.product_list[0].image_src" class="leftImg"
          :style="{width:item.product_list[0].image_width+ 'rpx'}" mode="widthFix"></image>
        </navigator>
         <!-- 楼层右侧图片 -->
        <view class="rightImg" v-if="item.product_list && item.product_list.length > 1">
          <navigator class="rightImgItem" v-for="(item2, index2) in item.product_list.slice(1)" 
          :key="index2" :url="item2.url">
            <image :src="item2.image_src" :style="{width:item2.image_width+ 'rpx'}"
            mode="widthFix" class="rightImg"></image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  onMounted,
  ref
} from 'vue';

onMounted(() => {
  getSwiperList()
  getNavCateList()
  getFloorList()
});

function goSearch() {
  uni.navigateTo({
    url: '/subpkg/search/search'
  })
}
// 轮播图数据
const swiperList = ref([]);
// 获取轮播图列表
async function getSwiperList() {
  try {
    const res = await uni.$http.get('/api/public/v1/home/swiperdata')
    if (res.statusCode !== 200) {
      return uni.showToast('请求失败', 1500, 'none')
    }
    swiperList.value = res.data.message // 假设你想将结果存储到 swiperList 中
  } catch (err) {
    console.error(err)
    uni.showToast('请求出错', 1500, 'none')
  }
}

// 首页分类数据
const navCateList = ref([]);
// 点击分类图标跳转
function navToCate(item) {
  if (item.name === '分类') {
    uni.switchTab({
      url: '/pages/cate/cate'
    });
  }
}
// 获取首页分类数据
async function getNavCateList() {
  const res = await uni.$http.get('/api/public/v1/home/catitems')
  if (res.statusCode === 200) {
    navCateList.value = res.data.message
  }
}

// 楼层数据
const floorList = ref([]);
// 获取楼层数据
async function getFloorList() {
  const res = await uni.$http.get('/api/public/v1/home/floordata')
  if (res.statusCode === 200) {
    const validatedFloorList = res.data.message.filter(item => item.floor_title && item.floor_title.image_src);
    
    // 自定义属性的url
    validatedFloorList.forEach(floor => {
      floor.product_list.forEach(prod => {
        prod.url = `/subpkg/goods_list/goods_list?`+prod.navigator_url.split('?')[1];
      })
    })
    floorList.value = validatedFloorList;  // 只存储那些有正确数据的项
  }
}
</script>


<style lang="scss">
.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
}
// 轮播图
swiper {
  height: 330rpx; // 确保 swiper 有高度

  .swiper-item {
    height: 330rpx; // 确保 swiper-item 有高度

    image {
      height: 100%; // 或者设置为具体的高度
      width: 100%; // 或者设置为具体的宽度
    }
  }
}

// 首页分类图
.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;

  .nav-img image {
    width: 128rpx;
    height: 140rpx;
  }
}

// 楼层标题
.floor-title {
  height: 60rpx;
  width: 100%;
  display: flex;
}

// 楼层图片
.floorImgBox {
  display: flex;
  padding-left: 10rpx;
  margin-bottom: 10rpx;
}

// 楼层右侧图片
.rightImg {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

</style>